<template>
  <div class="evaluate">
    <div class="top">
      <div class="num">{{seller.score}}</div>
      <div class="star">
        <p class="mark">商家评分</p>
        <van-rate
          v-model="value"
          readonly
          size="5px"
        />
      </div>
      <div class="taste">
        <div class="left">
          <p>味道</p>
          <p class="grade">{{seller.foodScore}}</p>
        </div>
        <div class="med">
          <p>包装</p>
          <p class="grade">{{seller.packScore}}</p>
        </div>
        <div class="right">
          <p>配送</p>
          <p class="grade">{{seller.serviceScore}}</p>
        </div>
      </div>
    </div>
    <div class="tag">
      <p class="first">
        <van-radio-group
          v-model="radio"
          class="radio_group"
        >
          <van-radio
            name="1"
            class="radio_item"
          >
            <van-tag
              slot="icon"
              slot-scope="props"
              size="large"
              :color="props.checked?'rgb(0, 151, 255)':'rgb(235, 245, 255)'"
              :text-color="props.checked?'#ffffff':'#aaa'"
            >
              全部
              <span style="font-size:12px">({{ratings.length}})</span>
            </van-tag>
          </van-radio>
          <van-radio
            name="2"
            class="radio_item"
          >
            <van-tag
              slot="icon"
              slot-scope="props"
              size="large"
              :color="props.checked?'rgb(0, 151, 255)':'rgb(235, 245, 255)'"
              :text-color="props.checked?'#ffffff':'#aaa'"
            >
              好评
              <span style="font-size:12px">({{goodratings.length}})</span>
            </van-tag>
          </van-radio>
          <van-radio
            name="3"
            class="radio_item"
          >
            <van-tag
              slot="icon"
              slot-scope="props"
              size="large"
              :color="props.checked?'rgb(102, 102, 102)':'rgb(245, 245, 245)'"
              :text-color="props.checked?'#ffffff':'#aaa'"
            >
              差评
              <span style="font-size:12px">({{badratings.length}})</span>
            </van-tag>
          </van-radio>
        </van-radio-group>
      </p>
      <div class="selected">
        <van-radio-group
          v-model="radio2"
          icon-size="12px"
        >
          <van-radio name="1">只看有内容的评价</van-radio>
        </van-radio-group>
      </div>
    </div>
    <!-- 全部 -->
    <div class="comment" v-if="radio==='1'">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item,index) in ratings"
          :key="index"
          class="cell"
        >
          <div
            slot="default"
            class="default"
          >
            <div class="left">
              <van-image
                round
                width="2rem"
                height="2rem"
                :src="item.avatar"
              />
            </div>
            <div class="right">
              <p class="title"><span class="name">{{item.username}}</span><span class="time">{{item.rateTime | datafmt}}</span></p>
              <p class="star">
                <van-rate
                  v-model="item.score"
                  readonly
                  size="5px"
                /> <span v-show="item.score>=4">超赞</span>
                <span class="deliveryTime">{{item.deliveryTime}}分钟送达</span>
              </p>
              <p class="det">{{item.text}}</p>
              <p class="dish">
                <van-icon
                  name="good-job-o"
                  v-show="item.recommend.length>=1"
                />
                <van-tag
                  plain
                  type="primary"
                  v-for="(rec,index) in item.recommend"
                  :key="index"
                  class="dish_inner"
                >{{rec}}</van-tag>
              </p>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <!-- 好评 -->
    <div class="comment" v-if="radio==='2'">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item,index) in goodratings"
          :key="index"
          class="cell"
        >
          <div
            slot="default"
            class="default"
          >
            <div class="left">
              <van-image
                round
                width="2rem"
                height="2rem"
                :src="item.avatar"
              />
            </div>
            <div class="right">
              <p class="title"><span class="name">{{item.username}}</span><span class="time">{{item.rateTime | datafmt}}</span></p>
              <p class="star">
                <van-rate
                  v-model="item.score"
                  readonly
                  size="5px"
                /> <span v-show="item.score>=4">超赞</span>
                <span class="deliveryTime">{{item.deliveryTime}}分钟送达</span>
              </p>
              <p class="det">{{item.text}}</p>
              <p class="dish">
                <van-icon
                  name="good-job-o"
                  v-show="item.recommend.length>=1"
                />
                <van-tag
                  plain
                  type="primary"
                  v-for="(rec,index) in item.recommend"
                  :key="index"
                  class="dish_inner"
                >{{rec}}</van-tag>
              </p>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <!-- 差评 -->
    <div class="comment" v-if="radio==='3'">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item,index) in badratings"
          :key="index"
          class="cell"
        >
          <div
            slot="default"
            class="default"
          >
            <div class="left">
              <van-image
                round
                width="2rem"
                height="2rem"
                :src="item.avatar"
              />
            </div>
            <div class="right">
              <p class="title"><span class="name">{{item.username}}</span><span class="time">{{item.rateTime | datafmt}}</span></p>
              <p class="star">
                <van-rate
                  v-model="item.score"
                  readonly
                  size="5px"
                /> <span v-show="item.score>=4">超赞</span>
                <span class="deliveryTime">{{item.deliveryTime}}分钟送达</span>
              </p>
              <p class="det">{{item.text}}</p>
              <p class="dish">
                <van-icon
                  name="good-job-o"
                  v-show="item.recommend.length>=1"
                />
                <van-tag
                  plain
                  type="primary"
                  v-for="(rec,index) in item.recommend"
                  :key="index"
                  class="dish_inner"
                >{{rec}}</van-tag>
              </p>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    value: 5,
    radio: "1",
    list: [],
    loading: false,
    finished: false,
    ratings: [],
    goodratings: [],
    badratings: [],
    seller: {},
    radio2: "1"
  }),
  props: ["id"],
  created() {
    this.getratings();
    this.getSeller();
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    async getratings() {
      const {
        data: { status, ratings }
      } = await this.$axios.get("/api/getdetail/ratings");
      this.ratings = ratings;
      ratings.forEach(item => {
        if (item.score > 3) {
          this.goodratings.push(item);
        } else {
          this.badratings.push(item);
        }
      });
      console.log(this.goodratings);
      console.log(this.badratings);
    },
    async getSeller() {
      const {
        data: { status, sellers }
      } = await this.$axios.get("api/getdetail/seller");
      sellers.forEach(item => {
        if (item.id === this.id) {
          this.seller = item.seller;
        }
      });
      console.log(this.seller);
    }
  }
};
</script>
<style lang="less" scoped>
.evaluate {
  .top {
    width: 100%;
    height: 96px;
    padding: 10px 20px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    box-sizing: border-box;
    .num {
      font-size: 30px;
      text-align: center;
      line-height: 50px;
      color: #ff6000;
    }
    .star {
      padding: 15px 5px;
      .mark {
        margin-bottom: 3px;
        color: #666;
      }
    }
    .taste {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      color: #666;
      .grade {
        font-size: 20px;
        margin: 0;
      }
      .left {
      }
      .med {
        padding: 0 30px 0 15px;
        border-right: 1px solid #ccc;
      }
      .right {
        padding-left: 15px;
      }
    }
  }
  .tag {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    p {
      margin: 5px 0;
      .van-tag {
        margin-right: 8px;
      }
    }
    .first {
      .radio_group {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .radio_item {
          margin-right: 10px;
          height: 40px;
        }
      }
    }
    .second {
    }
    .third {
    }
    .fouth {
    }
    .selected {
      padding: 2px 10px;
      font-size: 12px;
      color: #666;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
  }
  .comment {
    .cell {
      font-size: 12px;
      .default {
        display: flex;
        .left {
          flex: 1;
        }
        .right {
          flex: 5;
          .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2px 0;
            .name {
              color: #666;
            }
            .time {
              color: #666;
            }
          }
          .star {
            margin: 0;
            color: rgb(255, 96, 0);
            .deliveryTime {
              color: #999;
              margin-left: 10px;
            }
          }
          .det {
            margin: 2px 0;
            font-size: 14px;
            color: black;
          }
          .dish {
            .dish_inner {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
</style>